* {
    margin: 0;
    padding: 0
}

html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

section {
    flex: 1;
    overflow: auto
}

header {
    height: 0.88rem;
    background: #fed946;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .spa1 {
        width: 6rem;
        height: 0.6rem;
        background: #fff;
        border-radius: 0.2rem;
        padding-left: 0.16rem;
        input {
            width: 5rem;
            height: 0.6rem;
            border: 0;
            margin-left: 0.16rem;
            font: 0.3rem/0.44rem "PingFang SC";
        }
    }
    .icon-xiaoxi {
        font-size: 0.51rem;
    }
}

footer {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 0.98rem;
    text-align: center;
    color: #474747;
    .iconfont {
        font-size: 0.44rem;
    }
    a {
        display: flex;
        flex-direction: column;
        text-align: center;
        span {
            font: 0.24rem/0.34rem "PingFang SC";
        }
    }
}

.sec1 {
    .swiper-container {
        height: 2.9rem;
        background: pink;
        margin: 0.1rem 0 0 0;
        .swiper-slide {
            height: 2.9rem;
            width: 100%;
            background: #f00;
            img {
                height: 100%;
                width: 100%;
            }
        }
    }
    .nav {
        height: 1.98rem;
        display: flex;
        align-items: center;
        justify-content: space-around;
        // text-align: center;
        .iconfont {
            font-size: 0.66rem;
        }
        a {
            display: flex;
            flex-direction: column;
            text-align: center;
            // align-items: center;
            span {
                font: 0.24rem/0.34rem "PingFang SC";
            }
        }
    }
    article {
        aside {
            height: 5.46rem;
            border-top: 0.02rem solid #979797;
            .content {
                width: 6.78rem;
                margin: 0 auto;
                .name {
                    display: flex;
                    flex-direction: row;
                    // justify-content: space-around;
                    font: 0.2rem/0.32rem "PingFang SC";
                    margin: 0.22rem 0;
                    img {
                        width: 0.32rem;
                        height: 0.32rem;
                        background: #D8D8D8;
                        border-radius: 50%;
                    }
                    div {
                        margin-left: 0.06rem;
                    }
                }
                .gambit {
                    width: 6.78rem;
                    height: 1rem;
                    background: #F5F5F5;
                    display: flex;
                    flex-direction: column;
                    .ga1 {
                        font: 0.2rem/0.28rem "PingFang SC";
                        margin-top: 0.12rem;
                        margin-left: 0.22rem;
                    }
                    .ga2 {
                        font: 0.32rem/0.44rem "PingFang SC";
                        margin-top: 0.06rem;
                        margin-left: 0.22rem;
                    }
                }
                .intro {
                    font: 0.24rem/0.34rem "PingFang SC";
                    width: 6.78rem;
                    height: 1.36rem;
                    margin-top: 0.18rem;
                    margin-left: 0.22rem;
                    color: #606060;
                }
                .picture {
                    display: flex;
                    margin-left: 0.22rem;
                    img {
                        width: 1.52rem;
                        height: 1.3rem;
                        background: #D8D8D8;
                        margin: 0.06rem 0 0.2rem 0.06rem;
                    }
                }
                .bottom {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    margin: 0 0.22rem;
                    font: 0.24rem/0.34rem "PingFang SC";
                    color: #9F9F9F;
                    .bot-left span {
                        margin-right: 0.58rem;
                        color: #9F9F9F;
                        margin-right: 0.54rem;
                    }
                    .bot-left span {
                        color: #9F9F9F;
                    }
                }
            }
        }
    }
}

.sec2 {
    .art1 {
        display: flex;
        height: 0.78rem;
        justify-content: space-around;
        align-items: center;
        select,
        div {
            width: 1.1rem;
            height: 0.58rem;
            background: #f6f6f6;
            border-radius: 0.04rem;
            font-size: 0.26rem;
            color: rgba(159, 159, 159, 1);
            text-align: center;
            line-height: 0.58rem;
            border: 0;
        }
    }
    .art2 {
        overflow: auto;
        display: flex;
        // align-content:flex-start;
        // justify-content: center;
        background: #f4f4f4;
        flex-direction: row;
        width: 10.02rem;
        height: 10.3rem;
        margin: 0 auto;
        flex-wrap: wrap;
        // flex-direction: column;
        .content1:nth-of-type(2n-1) {
            margin-left: 0.26rem;
        }
        .content1 {
            display: flex;
            // flex-direction :row;
            flex-direction: column;
            // justify-content: center;
            width: 3.46rem;
            min-height: 4.24rem;
            max-height: 5.28rem;
            margin: 0 0.01rem 0.01rem 0;
            border-radius: 0.2rem;
            overflow: hidden;
            background: #fff;
            .picture {
                width: 3.46rem;
                min-height: 2.68rem;
                max-height: 3.74rem;
            }
            .text {
                width: 3.16rem;
                height: 0.72rem;
                margin: 0 auto;
                font: 0.26rem/0.36rem "PingFang SC";
                color: #333333;
            }
            .shoucang {
                width: 3.16rem;
                height: 0.74rem;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                .name {
                    display: flex;
                    flex-direction: row;
                    font: 0.24rem/0.34rem "PingFang SC";
                    color: #9F9F9F;
                    margin: 0.22rem 0;
                    img {
                        width: 0.32rem;
                        height: 0.32rem;
                        background: #D8D8D8;
                        border-radius: 50%;
                    }
                    div {
                        margin-left: 0.06rem;
                    }
                }
                span {
                    margin: 0.22rem 0;
                }
            }
        }
    }
}

.sec3 {
    // font:0.36rem/0.5rem "PingFang SC";
    // display: flex;
    // justify-content: center;
    // flex-direction: column;
    .d1 {
        font: 0.36rem/0.5rem "PingFang SC";
        margin: 0 0 0.22rem 0.24rem;
    }
    .nav {
        height: 1.94rem;
        // font:0.26rem/0.36rem "PingFang SC";
        display: flex;
        justify-content: space-around;
        align-items: center;
        display: flex;
        align-items: center;
        justify-content: space-around;
        // text-align: center;
        .iconfont {
            font-size: 0.76rem;
        }
        a {
            display: flex;
            flex-direction: column;
            text-align: center;
            // align-items: center;
            span {
                font: 0.26rem/0.54rem "PingFang SC";
            }
        }
    }
    .front {
        // height: 1.94rem;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        div {
            width: 2.3rem;
            height: 1.64rem;
            border: 0.01rem solid #E8E8E8;
            font: 0.2rem/0.54rem "PingFang SC";
            display: flex;
            align-items: center;
            justify-content: center;
            .iconfont {
                font-size: 0.45rem;
            }
            a {
                display: flex;
                flex-direction: column;
                text-align: center;
                span {
                    font: 0.26rem/0.54rem "PingFang SC";
                }
            }
        }
    }
    .rear {
        height: 1.94rem;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        div {
            width: 2.3rem;
            height: 1.64rem;
            border: 0.01rem solid #E8E8E8;
            font: 0.2rem/0.54rem "PingFang SC";
            display: flex;
            align-items: center;
            justify-content: center;
            .iconfont {
                font-size: 0.45rem;
            }
            a {
                display: flex;
                flex-direction: column;
                text-align: center;
                span {
                    font: 0.26rem/0.54rem "PingFang SC";
                }
            }
        }
    }
}

.head {
    height: 1.88rem;
    background: #fcd045;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .name {
        display: flex;
        margin-left: 0.24rem;
        img {
            width: 1rem;
            height: 1rem;
            background: #000;
            border-radius: 50%;
        }
        .name1 {
            display: flex;
            flex-direction: column;
            margin-left: 0.34rem;
            label {
                font: 0.32rem/0.44rem "PingFang SC";
            }
            a {
                font: 0.24rem/0.34rem "PingFang SC";
                margin-top: 0.1rem;
            }
        }
    }
    span {
        font: 0.24rem/0.34rem "PingFang SC";
        margin-right: 0.24rem;
    }
}

.sec4 {
    .one1 {
        height: 3.12rem;
        border-bottom: 0.02rem solid #E8E8E8;
        display: flex;
        flex-direction: column;
        color: #2B2B2B;
        // align-items: center;
        // justify-content: space-around;
        // text-align: center;
        .iconfont {
            font-size: 0.4rem;
        }
        div {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            margin-top: 0.4rem;
            a {
                display: flex;
                flex-direction: column;
                text-align: center;
                // align-items: center;
                span {
                    font: 0.24rem/0.54rem "PingFang SC";
                }
            }
        }
    }
    .two {
        display: flex;
        flex-direction: column;
        font: 0.28rem/0.4rem "PingFang SC";
        color: #595959;
        div {
            height: 1.1rem;
            border-bottom: 0.01rem solid #E8E8E8;
            display: flex;
            justify-content: space-between;
            margin: 0 0.26rem;
            align-items: center;
            a {
                margin-left: 0.34rem;
            }
        }
    }
}